import React, { Fragment, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { Card, Content, Dialog, Button } from 'react-fule-ui';
import { Demo } from './demo.js';

export default function FullCard() {
  const [visible1, setVisible1] = useState(false);
  const funOpen1 = () => {
    setVisible1(true);
  };
  const funClose1 = () => {
    setVisible1(false);
  };
  const [visible2, setVisible2] = useState(false);
  const funOpen2 = () => {
    setVisible2(true);
  };
  const funClose2 = () => {
    setVisible2(false);
  };
  return (
    <Fragment>
      <Content>
        <Content.Header>对话框</Content.Header>
        <Content.Body>
          <Card>
            <Card.Header>基础用法</Card.Header>
            <Card.Body>
              <div className="demo-block">
                <Button onClick={funOpen1}>打开弹出层1</Button>
              </div>
              <div className="demo-block">
                <Button onClick={funOpen2}>打开弹出层2</Button>
              </div>
              <Dialog open={visible1} onClick={funClose1} title="1111">
                <Dialog.Body>123</Dialog.Body>
              </Dialog>
              <Dialog open={visible2} onClick={funClose2} title="222">
                <Dialog.Body>123</Dialog.Body>
              </Dialog>
              <ReactMarkdown
                children={Demo}
                components={{
                  code({ node, inline, className, children, ...props }) {
                    const match = /language-(\w+)/.exec(className || '');
                    return !inline && match ? (
                      <SyntaxHighlighter
                        children={String(children).replace(/\n$/, '')}
                        style={vscDarkPlus}
                        language={match[1]}
                        PreTag="div"
                        className="fl-syntaxHighlighter--div"
                        {...props}
                      />
                    ) : (
                      <code className={className} {...props}>
                        {children}
                      </code>
                    );
                  },
                }}
              />
            </Card.Body>
          </Card>
        </Content.Body>
      </Content>
    </Fragment>
  );
}
